import { ReactNode } from "react"

import {
    Card,
    CardContent,
    CardFooter,
    CardHeader
} from "@/components/ui/card"
import Header from "@/components/auth/header"
import Social from "@/components/auth/social"
import BackButton from "@/components/auth/back-button"

type CardWrapperProps = {
    headerLabel: string
    backButtonLabel: string
    backButtonPath: string
    showSocial?: boolean

    children: ReactNode
}

const CardWrapper = ({
    headerLabel,
    backButtonLabel,
    backButtonPath,
    showSocial,
    children
}: CardWrapperProps) => {
    return (
        <Card className="w-[400px] shadow-md">
            <CardHeader> <Header label={headerLabel} /> </CardHeader>
            <CardContent>
                {children}
            </CardContent>
            {showSocial && (
                <CardFooter>
                    <Social />
                </CardFooter>
            )}
            <CardFooter>
                <BackButton href={backButtonPath} label={backButtonLabel} />
            </CardFooter>
        </Card>
    )
}

export default CardWrapper